<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="no-referrer" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link th:href="@{/main/css/main.css}" rel="stylesheet">
    <title>美食分享平台</title>
</head>
<body>
<!-- 顶部导航栏 -->
<div th:replace="common/m_topbar::m_topbar"></div>
<!-- 图片轮播 -->
<div th:replace="common/m_image::m_image"></div>
<!-- 主要内容 -->
<div class="container">
    <div class="row">
        <!-- 左侧-->
        <div id="main_left" class="col-sm-3">
            <h2 class="page-header">热门排行</h2>
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="/foodshare/main/index">热门推荐</a></li>
                <li><a href="/foodshare/main/lately">最近更新</a></li>
                <li><a href="#">收藏最多</a></li>
            </ul>
            <br/>
            <h3><svg t="1586518993367" class="feather" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="6432" width="20" height="20">
                <path d="M642.744 1013.924c-7.588 0-15.063-2.775-20.94-8.1L317.07 731.597h-176.23c-50.453 0-125.481-33.424-125.481-125.481V417.905c0-50.453 33.444-125.481 125.47-125.481H317L621.732 18.135c9.206-8.346 22.456-10.353 33.74-5.325a31.315 31.315 0 0 1 18.637 28.672v941.066c0 12.37-7.219 23.655-18.565 28.683a31.639 31.639 0 0 1-12.8 2.693z m-501.913-658.75c-59.73 0-62.73 52.255-62.73 62.74v188.212c0 59.658 52.264 62.74 62.73 62.74h188.21c7.783 0 15.248 2.878 20.952 8.1l261.376 235.131V111.923L350.075 347.075c-5.775 5.201-13.23 8.1-21.023 8.1H140.831zM799.58 323.8c-7.957 0-16.047-3.082-22.201-9.165-12.237-12.226-12.237-32.123 0-44.36l125.48-125.48c12.227-12.217 32.103-12.217 44.36 0 12.227 12.236 12.227 32.133 0 44.37l-125.47 125.47c-6.103 6.083-14.06 9.165-22.17 9.165zM987.8 543.375h-188.22c-17.245 0-31.366-14.039-31.366-31.365 0-17.316 14.121-31.365 31.365-31.365h188.222c17.377 0 31.365 14.06 31.365 31.365 0 17.326-13.988 31.365-31.365 31.365z m-62.74 345.068a31.582 31.582 0 0 1-22.2-9.165L777.38 753.798c-12.237-12.227-12.237-32.103 0-44.36 12.226-12.217 32.102-12.217 44.37 0l125.47 125.47c12.227 12.257 12.227 32.144 0 44.37-6.092 6.093-14.049 9.165-22.159 9.165z m0 0" fill="#000000" p-id="6433"></path></svg>
                &nbsp;系统公告</h3>
            <div style="width: 250px;height: 380px">
                <ul th:each="user:${users}" class="nav">
                    <li th:each="nt:${notice}">
                        <button style="margin-top: 20px" th:if="${user.userId} eq ${nt.userId} and ${nt.status} eq '1'"
                                class="btn btn-success" th:title="${nt.noticeTitle}"
                                data-container="body" data-toggle="popover" data-placement="right"
                                th:data-content="${nt.noticeDetail}+'<br/>'+'发布用户：'+${user.username}
                                +'<br/>'+'发布时间：'+${#dates.format(nt.updateTime,'yyyy-MM-dd HH:mm')}"
                                th:text="${nt.noticeId}+'、'+${nt.noticeTitle}"></button>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 中间 -->
        <div id="food" class="col-sm-6">
            <h2 class="page-header">热门美食推荐
            <a href="/foodshare/main/food" style="float: right;font-size: 13px;line-height: 50px;color: #256DC6">更多></a>
            </h2>
            <ul class="nav nav-pills nav-stacked">
                <li th:fragment="food" class="media" th:each="food:${foods}">
                    <div class="media-left">
                        <a th:href="'/foodshare/main/foodDetail/'+${food.foodId}">
                            <img height="180" width="200" th:src="${food.image}"></a>
                    </div>
                    <div class="media-body">
                        <div style="width: 300px;height: 20px;">
                            <a th:href="'/foodshare/main/foodDetail/'+${food.foodId}">
                                <h4 class="media-heading" th:text="${food.title}"></h4></a>
                        </div>
                        <div style="width: 300px;height: 120px">
                            <p th:text="${food.detail}"></p>
                        </div>
                        <!-- 收藏 -->
                        <form class="form-group" style="width: 340px;height: 30px;bottom: 0" action="/foodshare/main/collect" method="post">
                            <div th:each="ur:${users}" th:if="${ur.userId} eq ${food.userId}">
                                <a th:href="'/foodshare/main/personal/'+${ur.userId}">
                                <img th:if="${ur.head} eq null or ${ur.head} eq ''" style="width: 30px" class="img-circle"
                                         th:src="@{/main/img/head.jpg}">
                                <img style="width: 30px" class="img-circle"
                                     th:src="${ur.head}"></a>
                                <a th:href="'/foodshare/main/personal/'+${ur.userId}">
                                    <span th:text="${ur.username}"></span></a>
                                <input type="hidden" th:value="${user.userId}" name="userId">
                                <input type="hidden" th:value="${food.foodId}" name="foodId">
                                <input type="hidden" value="1" name="status">
                                <button id="collect" style="margin-left: 105px;background-color: white;outline:none;border: none;position: relative;height: 30px" type="submit">
                                        <img height="20" width="20" th:src="@{/main/img/beforecollect.svg}">
                                        <span style="font-size: 13px">收藏</span>
                                </button>
                            </div>
                        </form>
                        <button id="clcollect" th:each="collect:${collects}" th:if="${user.username} ne 'nobody' and ${collect.foodId} eq ${food.foodId} and ${collect.status} eq 1" style="right: 100px;bottom:40px;background-color: white;border: none;display: block;z-index: 2;position: absolute">
                            <a style="text-decoration: none" th:href="@{/collect/delete/}+${collect.collectId}">
                                <img height="20" width="20" th:src="@{/main/img/aftercollect.svg}">
                                <span style="font-size: 13px">取消收藏</span>
                            </a>
                        </button>
                    </div>
                    <br/>
                </li>
            </ul>
        </div>
        <!-- 广告轮播图 -->
        <div class="col-sm-3">
            <h2 class="page-header">广告招商</h2>
            <p>广告信息内容</p>
            <div id="advertisement" data-ride="carousel" class="carousel slide" style="vertical-align: top">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#advertisement" data-slide-to="0" class="active"></li>
                    <li data-target="#advertisement" data-slide-to="1"></li>
                    <li data-target="#advertisement" data-slide-to="2"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img style="width:250px; height:250px" th:src="@{/main/img/ad.jpg}" alt="First slide">
                    </div>
                    <div class="item">
                        <img style="width:250px; height:250px" th:src="@{/main/img/ad.jpg}" alt="Second slide">
                    </div>
                    <div class="item">
                        <img style="width:250px; height:250px" th:src="@{/main/img/ad.jpg}" alt="Third slide">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="left carousel-control" id="ad_left" href="#advertisement" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" id="ad_right" href="#advertisement" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
           <!-- 在线联系客服留言 -->
            <div style="width: 100%;height: 330px">
                <br/><br/>
                <h3 style="height: 50px"><svg t="1586687643034" class="feather" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1922" width="30" height="30">
                    <path d="M692.044 907.99c-50.823 0-116.435-33.972-162.532-62.48-61.727-38.171-128.228-90.978-187.255-148.687l-0.215-0.21-18.74-18.813c-57.514-59.226-110.135-125.963-148.176-187.902-28.405-46.254-62.269-112.094-62.269-163.091 0-54.575 38.893-112.498 55.614-134.868 13.045-17.459 58.634-74.42 97.364-74.42 15.904 0 33.029 10.444 55.54 33.871 19.909 20.711 39.013 46.46 51.534 64.412 16.813 24.1 32.364 49.335 43.792 71.059 18.5 35.17 20.64 50.256 20.64 58.54 0 16.72-8.703 31.226-25.867 43.106-11.302 7.82-24.867 13.709-37.984 19.404-8.85 3.841-22.976 9.969-28.368 14.282 1.882 7.99 10.101 27.289 32.308 60.006 20.692 30.485 47.453 63.523 71.629 88.435 24.822 24.255 57.743 51.111 88.134 71.877 32.594 22.276 51.822 30.528 59.794 32.416 4.29-5.406 10.404-19.582 14.229-28.458 5.676-13.166 11.542-26.781 19.341-38.123 11.841-17.222 26.294-25.951 42.958-25.951 8.26 0 23.29 2.148 58.343 20.707 21.648 11.467 46.8 27.071 70.815 43.943 17.887 12.565 43.548 31.738 64.192 51.711 23.341 22.591 33.75 39.773 33.75 55.737 0 38.861-56.762 84.605-74.157 97.695-22.301 16.781-80.028 55.805-134.415 55.805l0 0 0 0zM374.821 663.5c56.627 55.348 120.22 105.871 179.098 142.274 57.077 35.298 107.423 55.545 138.125 55.545 27.35 0 66.337-16.762 104.302-44.829 16.64-12.31 31.785-26.015 42.649-38.593 10.191-11.809 13.917-19.51 14.864-22.62-3.941-8.492-27.335-35.039-81.934-72.833-21.419-14.825-43.562-28.45-62.351-38.365-23.594-12.445-33.428-14.594-35.676-14.949-0.876 0.603-3.444 2.758-7.351 9.329-4.373 7.358-8.575 17.107-12.64 26.537-5.001 11.61-10.177 23.61-16.525 33.298-10.322 15.751-22.995 23.746-37.668 23.754-0.262 0-0.542-0.004-0.826-0.015-7.137-0.151-28.875-0.613-87.887-40.941-32.578-22.272-67.961-51.146-94.629-77.251l-0.417-0.411c-26.009-26.773-54.782-62.269-76.975-94.956-40.195-59.216-40.662-81.028-40.812-88.197-0.32-14.99 7.566-27.926 23.423-38.467 9.698-6.441 21.76-11.677 33.423-16.742 9.396-4.076 19.109-8.292 26.441-12.676 6.547-3.915 8.703-6.498 9.297-7.376-0.353-2.258-2.494-12.125-14.898-35.802-9.878-18.849-23.459-41.074-38.228-62.563-37.668-54.795-64.124-78.265-72.583-82.22-3.101 0.954-10.775 4.693-22.542 14.918-12.539 10.893-26.197 26.098-38.457 42.797-27.974 38.087-44.674 77.213-44.674 104.658 0 30.805 20.172 81.322 55.346 138.599 36.286 59.081 86.631 122.894 141.787 179.715l18.318 18.382zM651.641 496.02c-8.117 0-15.308-5.839-16.764-14.139-4.172-23.738-17.871-44.363-38.573-58.077-20.997-13.905-46.66-19.069-72.271-14.538-9.275 1.643-18.113-4.573-19.747-13.875-1.634-9.302 4.556-18.176 13.826-19.815 34.23-6.058 68.669 0.932 96.97 19.68 28.601 18.942 47.554 47.595 53.37 80.686 1.634 9.302-4.557 18.176-13.827 19.814-1.003 0.177-1.998 0.263-2.982 0.263l0 0zM754.26 451.847c-8.113 0-15.308-5.837-16.764-14.133-8.094-46.068-34.623-86.057-74.694-112.599-40.369-26.736-89.652-36.674-138.77-27.984-9.275 1.639-18.11-4.573-19.747-13.875-1.634-9.302 4.556-18.176 13.826-19.814 57.739-10.215 115.793 1.543 163.468 33.125 47.972 31.771 79.754 79.787 89.491 135.207 1.634 9.302-4.556 18.176-13.827 19.814-1.004 0.173-1.998 0.258-2.982 0.258l0 0zM891.27 439.097c-8.117 0-15.311-5.839-16.767-14.139-13.811-78.614-59.043-146.832-127.355-192.074-68.609-45.438-152.318-62.337-235.706-47.584-9.27 1.639-18.11-4.573-19.743-13.875-1.634-9.302 4.556-18.176 13.826-19.814 92.006-16.281 184.489 2.443 260.404 52.721 76.208 50.473 126.693 126.719 142.15 214.686 1.634 9.302-4.56 18.176-13.83 19.814-0.999 0.178-1.995 0.267-2.98 0.267l0 0zM891.27 439.097z" p-id="1923"></path></svg>
                    联系我们：</h3>
                <div style="height:60px">
                    <img width="30" height="30" th:src="@{/main/img/phone.svg}">
                    <span>&nbsp;&nbsp;&nbsp;咨询热线：17307406235</span>
                </div>
                <div style="height:60px">
                    <img width="30" height="30" th:src="@{/main/img/message.svg}">
                    <button style="border: none;outline: none;background-color: white" class="btn btn-default" data-toggle="modal" data-target="#myModal">在线留言</button>
                    <form action="/foodshare/message/saveMessage" method="post" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <input type="hidden" name="userId" th:value="${user.userId}">
                                <input type="hidden" name="status" value="1">
                                <div class="form-group">
                                    <label>留言标题</label>
                                    <input name="messageTitle" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label>留言内容</label>
                                    <textarea class="form-control" rows="3" name="messageDetail"></textarea>
                                </div>
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary">留言</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div style="height:60px">
                    <img width="30" height="30" th:src="@{/main/img/complain.svg}">
                    <span>&nbsp;&nbsp;&nbsp;投诉建议</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 美食资讯 -->
    <div id="news" class="row">
        <div class="col-sm-12">
            <div class="col-sm-9">
                <h2 class="page-header">美食资讯
                    <a href="/foodshare/main/news" style="float: right;font-size: 13px;line-height: 50px;color: #256DC6">更多></a>
                </h2>
                <ul class="nav nav-pills nav-stacked">
                    <li th:fragment="news" class="media" th:each="nw:${news}">
                        <div class="media-left">
                            <a th:href="'/foodshare/main/newsDetail/'+${nw.newsId}">
                                <img height="180" width="200" th:src="${nw.newsImage}">
                            </a>
                        </div>
                        <div class="media-body">
                            <a th:href="'/foodshare/main/newsDetail/'+${nw.newsId}"><h4 class="media-heading"
                                                                                          th:text="${nw.newsTitle}"></h4></a>
                            <p th:text="${nw.newsDetail}"></p>
                        </div>
                        <br/>
                    </li>
                </ul>
            </div>
            <div class="col-sm-3">
                <h2 class="page-header">美食达人</h2>
                <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="#">今日推荐</a></li>
                    <li><a href="#">热门食材</a></li>
                    <li><a href="#">菜谱大全</a></li>
                    <li><a href="#">厨具</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
<div th:replace="common/m_bottom::m_bottom"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    //左侧active
    $(function () {
        $(".nav-stacked").find("li").each(function () {
            var a = $(this).find("a:first")[0];
            if ($(a).attr("href") === location.pathname) {
                $(this).addClass("active");
            } else {
                $(this).removeClass("active");
            }
        });
    })
    //公告
    $(function (){
        $("[data-toggle='popover']").popover({
            html:true
        });
    });
    //留言
    $('#identifier').modal()
    //收藏
</script>
</body>
</html>